<template>
	<view class="content">
		<!-- <text>{{title}}</text> -->

		<view class="albums-box-title">
			<text>{{title}}</text>
		</view>
		<view class="content-in">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="in-albums-box">
					<view v-for="(item,index) in albums" :key="index" :class="{'active':item.active}"
						:data-index="index" @tap="previewPhoto">
						<image :src="item.srccccc" mode="aspectFill" lazy-load="true"></image>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- <previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"
			@longPress="longPress"></previewImage> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	// var _this;
	export default {
		// components: {
		// 	previewImage
		// }, //注册插件
		data() {
			return {
				title: '',
				bf_options: [],
				albums: [],
				// 筛选为空
				curWord: '',
				upOption: {
					noMoreSize: '', //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						use: true,
						icon: '/static/image/zanwushuju@2x.png',
						tip: '~ 无结果 ~', // 提示
					}
				},
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					empty: {
						use: true,
						tip: '~ 无结果 ~' // 提示
					}
				},

				photo_src_Arr: [],
				imgs: [],
				descs: [],
				rows: 2,
				page: 1,
			}
		},
		mixins: [MescrollMixin], // 使用mixin
		onLoad(options) {
			// console.log(options)
			this.bf_options = options
			this.title = options.title
			this.bf_options.number = options.number
		},
		methods: {
			/*下拉刷新的回调, 有3种处理方式:*/
			downCallback() {
				// 绝大部分情况methods中都不用写downCallback的,此时会默认调MescrollMixin的downCallback (效果同第2种)
				this.mescroll.endSuccess()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log(this.bf_options)
				// 自写
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				// 第1种: 请求具体接口
				uni.request({
					// 402809817be1d955017be1e9d3410006
					// url: 'http://pension.bcjkcloud.com:10030/api-attach/attachs?onwerId=402809817be1d955017be1e9d3410006&ownerType=com.operate.entity.PhotoAlbum',
					url: 'http://pm.gxtimeloit.com:10030/api-attach/v1/attachs?ownerId=' + this.bf_options.id +
						'&ownerType=com.operate.entity.PhotoAlbum&pageSize=' + pageSize + '&pageNumber=' + pageNum,
					success: (data) => {
						console.log('111',data)
						// console.log(data)
						// 接口返回的当前页数据列表 (数组)
						if (data.data.data.data == null) {
							this.mescroll.endBySize(0, 0);
						} else {
							// console.log(this.photo_src_Arr)
							let curPageData = data.data.data.data;
							// console.log("data.data.body.settlement.data.length",data.data.body.settlement.data.length)
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = data.data.data.pageSize;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							let totalPage = data.data.data.totalPage;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							let totalSize = data.data.data.totalSize;
							// 接口返回的是否有下一页 (true/false)
							let hasNext = false;
							// 请求成功,隐藏加载状态
							this.mescroll.endSuccess()

							// if (page.num == 1) this.meters = []; //如果是第一页需手动制空列表
							this.albums = this.albums.concat(curPageData);//链接数组
							
							// this.testGETphoto()
							this.changeAlbums()
							this.showImages()
							// 添加buidingNo字段
							// this.meters.forEach(item => {
							// 　　this.$set(item,'buidingNo','')
							// })

							// 测试在线图片=============
							// console.log("albums", this.albums)
							// 测试在线图片=============


							this.mescroll.endBySize(curPageLen, totalSize);

						}
					},
					fail: () => {
						// 请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
			},
			
			//改变数组
			changeAlbums(){
					// console.log(this.albums)
				for(let i=0;i<this.albums.length;i++){
					// console.log(this.albums[i].attachId)
					let data=[]
					data.push(i)
					data.push(this.albums[i].attachId)
					this.albums[i].srccccc="http://pm.gxtimeloit.com:10030/api-attach/attachDownload?id="+this.albums[i].attachId+"&isOnline=1"
				}
			},
			
			//获取照片
			getOneImg(e){
				// console.log("sss",as)
				uni.request({
					url:"http://pm.gxtimeloit.com:10030/api-attach/attachDownload?id="+e[1]+"&isOnline=1",
					responseType: "arraybuffer",
					success:(data)=> {
						let i=e[0]
						console.log(data)
					}
				})
			},
			// 官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					// console.log("刷新")
					// uni.redirectTo({
					// 	url: '/pages/meterCheck/index'
					// })
					uni.stopPullDownRefresh();
				}, 1000);
			},
			
			/* 显示照片 */
			showImages() {
				// console.log("this.albums",this.albums)
				let index = (this.page - 1) * this.rows;
				let show = () => {
					if (index < this.albums.length) {
						this.$set(this.albums[index], "active", true);
						index++;
					}
				}

				let interval = setInterval(() => {
					show();
				}, 100);
			},
			/* 预览照片 */
			previewPhoto(e) {
				// console.log(e)
				let plist = []
				plist = this.albums
				let albumss = []
				albumss = this.albums
				// plist.length=this.albums.length
				for (let i in plist) {
					if (plist[i].attachId) {
						plist[i].active = true;
						plist[i].index = i;
						plist[i].url = albumss[i].srccccc
					}
				}
				this.photoList = plist
				let index = e.currentTarget.dataset.index;
				let list = this.photoList.map((item, index) => {
					return item.url;
				});
				// console.log(index)
				uni.previewImage({
					current: list[index],
					/* 传 Number H5 端出现不兼容 */
					urls: list,
					loop: true // 是否可循环预览
				});
			}
		},
	}
</script>

<style>
	.albums-box-title {
		width: 95%;
		height: 100rpx;
		position: relative;
		font-size: 44rpx;
		margin-bottom: 30rpx;
		margin: 30rpx auto;
	}

	.albums-box-title::after {
		content: "";
		background-color: #E17564;
		width: 100%;
		height: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.album {

		width: 216rpx;
		height: 216rpx;

		font-size: 28rpx;
		margin-bottom: 20rpx;

		overflow: hidden;
		display: flex;
		align-items: center;
		flex-direction: column;
		/* border: #007AFF solid 1px; */
		border-radius: 15rpx;
		box-shadow: #959595 0rpx 3rpx 3rpx;
		/* margin-right: 20rpx; */
	}

	.albums-box {
		width: 95%;
	}

	.content-in {
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;

	}

	image {
		width: 216rpx;
		height: 216rpx;
		border-radius: 15rpx;
		box-shadow: #959595 0rpx 3rpx 3rpx;
	}

	.album-text {

		display: flex;
		justify-content: space-between;
	}

	.in-albums-box {
		border-radius: 15rpx;


		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>
